<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

function getRandomCourses(source: any[], count: number) {
  const shuffled = source.slice().sort(() => 0.5 - Math.random());
  return shuffled.slice(0, count);
}

const allCourses = [
  {
    id: 1,
    title: '数据库期末冲刺-3小时突击数据库',
    teacher: '梦阳老师',
    image: 'course-1.jpg',
    students: 1520,
    description: '数据库系统概论/数据库系统教程/数据库系统基础教程/数据库原理及应用'
  },
  {
    id: 2,
    title: '数据库原理与应用',
    teacher: '杨丽丽',
    image: 'course-2.jpg',
    students: 980,
    description: '在数字化时代，数据已成为驱动各领域发展的关键要素，而数据库作为数据管理的核心技术，其重要性不言而喻'
  },
  {
    id: 3,
    title: '算法与数据结构进阶',
    teacher: '王教授',
    image: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
    students: 2134,
    description: '深入学习高级算法和数据结构，掌握面试和实际工作中的核心能力'
  },
  {
    id: 4,
    title: 'MySQL数据库实战',
    teacher: '李峰',
    image: 'course-10.png',
    students: 1450,
    description: 'MySQL8+SQLyog13，直达核心，快速上手！'
  },
  {
    id: 5,
    title: '数据库系统概论',
    teacher: '许老师',
    image: 'course-11.png',
    students: 1237,
    description: '本课程作为数据库学习的入门课程，旨在系统介绍数据库系统的基本概念、核心原理与应用方法。'
  },
  {
    id: 6,
    title: '数据库系统',
    teacher: '战德臣',
    image: 'course-12.png',
    students: 1896,
    description: '通过本课程的学习，学生将掌握数据库的基础理论、关系模型、SQL语言的使用方法、数据库设计规范。'
  },
  {
    id: 7,
    title: '软件测试工程师所需的MySQL数据库技术',
    teacher: '王老师',
    image: 'course-13.png',
    students: 2573,
    description: '学习掌握本阶段内容，可具备数据库校验能力，还可以快速、规范的掌握 数据库增删改查操作。'
  },
  {
    id: 8,
    title: 'MySQL零基础教学',
    teacher: 'Harold',
    image: 'course-14.png',
    students: 1980,
    description: '本课程将带你从零基础到学会一些基本增删改查的使用。'
  },
  {
    id: 9,
    title: 'MySQL数据库零基础入门到精通',
    teacher: '张老师',
    image: 'course-15.png',
    students: 1345,
    description: '本套教程从真实需求出发，以实际应用为导向，摒弃冗余及较少使用的知识陷阱，简洁干脆'
  },
  {
    id: 10,
    title: 'Java IO流解析',
    teacher: '李老师',
    image: 'course-16.png',
    students: 1678,
    description: '全面解析Java-IO流，一键通关'
  },
  {
    id: 11,
    title: 'JavaWeb基础教程',
    teacher: '刘老师',
    image: 'course-17.png',
    students: 1450,
    description: 'JavaWeb是整个Web开发的基础课程，需要掌握三部分内容：数据库、前端、web核心。'
  },
  {
    id: 12,
    title: 'JDBC原理',
    teacher: '吴老师',
    image: 'course-18.png',
    students: 1980,
    description: 'JDBC是Java程序操作关系型数据库的一套规范，也是JavaEE规范之一。'
  },
  {
    id: 13,
    title: '数据库范式判断',
    teacher: '言齐齐齐',
    image: 'course-19.png',
    students: 4563,
    description: '本课程聚焦于关系数据库设计中的核心内容——数据库范式及其判断方法，旨在帮助学生理解范式的基本概念、规范化的意义以及如何在实际建模中判断和优化数据库表结构。'
  },
  {
    id: 14,
    title: '数据库候求解选码',
    teacher: '钮钴禄菌君',
    image: 'course-20.png',
    students: 1753,
    description: '通过本课程的学习，学生将掌握如何在给定函数依赖集合的条件下，准确求解候选码集合'
  }
];

const courses = ref(getRandomCourses(allCourses, 3));

const toHome = () => {
  router.push({ name: 'CourseHome' });
}
</script>

<template>
  <div class="course-grid">
    <div 
      v-for="course in courses" 
      :key="course.id" 
      class="course-card hover-card"
      @click="toHome"
    >
      <div class="course-image">
        <img :src="course.image" :alt="course.title">
      </div>
      <div class="course-content">
        <h3 class="course-title">{{ course.title }}</h3>
        <div class="course-info">
          <div class="teacher">
            <van-icon name="manager-o" size="14" />
            <span>{{ course.teacher }}</span>
          </div>
          <div class="students">
            <van-icon name="friends-o" size="14" />
            <span>{{ course.students }}人学习</span>
          </div>
        </div>
        <p class="course-description">{{ course.description }}</p>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  
  .course-card {
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.3s ease;
    
    .course-image {
      height: 160px;
      overflow: hidden;
      
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
      }
    }
    
    .course-content {
      padding: 16px;
      
      .course-title {
        margin: 0 0 10px;
        font-size: 16px;
        font-weight: 600;
        color: #323233;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 1.4;
        height: 45px;
      }
      
      .course-info {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
        font-size: 13px;
        color: #646566;
        
        .teacher, .students {
          display: flex;
          align-items: center;
          
          .van-icon {
            margin-right: 4px;
          }
        }
      }
      
      .course-description {
        margin: 0;
        font-size: 13px;
        color: #969799;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 1.4;
      }
    }
    
    &:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
      
      .course-image img {
        transform: scale(1.05);
      }
    }
  }
}

// 响应式适配
@media (max-width: 768px) {
  .course-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    
    .course-card .course-image {
      height: 140px;
    }
  }
}

@media (max-width: 480px) {
  .course-grid {
    grid-template-columns: 1fr;
    
    .course-card .course-image {
      height: 180px;
    }
  }
}
</style>